<template>
	<view :style="style" v-if="total > 0" class="__lib-page__">
		<view @click="()=>prev()" class="left-icon iconfont icon-sortleft"></view>
		<view class="page-content">
			<view v-for="(item, index) in pages" 
			:class="{'active': current === index + 1}" 
			:key="index" @click="()=>changePage(index + 1)" class="page-item">{{item.serial}}</view>
		</view>
		<view @click="()=>next()" class="right-icon iconfont icon-sortright"></view>
	</view>
</template>

<script>
	import {
		Theme
	} from "../../utils/theme/theme.js";
	import {
		Utils
	} from '../../utils/utils/utils.js';
	export default {
		name: 'lib-page',
		emit: ['onClose', 'update:show', 'pageChange'],
		props: {
			// 
			total: {
				type: Number,
				default: 0,
				required: false,
			},
			pageSize: {
				type: Number,
				default: 10,
				required: false,
			},
			modelValue: {
				type: Number,
				default: 1,
				required: false,
			},
		},
		data() {
			return {
				componentId: Utils.getRandomChars(8),
				style: {},
				current: 1,
				pages:[],
			}
		},
		methods: {
			setColor() {
				if (this.type === 'primary') {
					this.style.color = Theme.theme.primary;
				}
				if (this.type === 'danger') {
					this.style.color = Theme.theme.danger;
				}
				if (this.type === 'success') {
					this.style.color = Theme.theme.success;
				}
			},
			setPages() {
				const pages = Math.ceil(this.total / this.pageSize);
				for(let i = 0 ; i < pages ; i ++){
					this.pages.push({serial:i+1});
				}
			},
			changePage(pageNum) {
				if(pageNum === this.current){
					return;
				}
				this.current = pageNum;
				this.$emit("update:modelValue", pageNum);
				this.$emit("pageChange", pageNum);
			},
			prev(){
				if(this.current <= 1){
					return;
				}
				this.changePage(this.current - 1);
			},
			next(){
				if(this.current >= Math.ceil(this.total / this.pageSize) ){
					return;
				}
				this.changePage(this.current + 1);
			},
		},
		created() {
			// console.log('created');
			this.$watch('modelValue', function(newValue, oldValue) {
				// console.log('modelValue已变化：', oldValue, '->', newValue);
				if (newValue >= 0) {
					this.current = newValue;
				}
			}, {
				immediate: true
			});
		},
		mounted() {
			Theme.themeChange(this.componentId, () => {
				this.setColor();
			});
			this.setColor();
			this.setPages();
		},
		updated() {

		},
		destroyed() {
			Theme.delThemeChange(this.componentId);
		},
		unmounted() {
			Theme.delThemeChange(this.componentId);
		},
	}
</script>

<style lang="scss">
	@import "../../font/iconfont.css";
	.__lib-page__ {
		display: flex;
		overflow: hidden;
		align-items: center;
		font-size: 14px;
		
		.left-icon, .right-icon {
			width: 30px;
			height: 30px;
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
		}
		.page-content {
			display: flex;
			.page-item {
				width: 30px;
				height: 30px;
				display: flex;
				align-items: center;
				justify-content: center;
				box-sizing: border-box;
				border: 1px solid transparent;
				cursor: pointer;
				margin: 0 3px;
				border-radius: 5px;
				user-select: none;
				
				&:hover {
					background-color: #EEEEEE;
				}
				
				&.active {
					border-color: var(--primary);
					cursor: default;
					&:hover {
						background-color: #ffffff;
					}
				}
			}
		}
	}
</style>